<template>
  <!-- 左侧目录树 -->
  <div class="left-tree">
    <div class="top">{{ title }}</div>
    <!-- <div class="search"> -->
    <!-- <div class="icon-search"></div> -->
    <div class="search-wrap">
      <el-input
        size="mini"
        class="search"
        placeholder="搜索"
        v-model="filterText"
        maxlength="100"
      >
      </el-input>
      <el-button
        type="primary"
        class="inputSearchBtn"
        size="mini"
        @click="confirmFilterTextFn"
        >搜索</el-button
      >
    </div>
    <!-- </div> -->
    <div
      class="center"
      v-loading="loading"
      element-loading-text="目标数据正在准备中..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0,0,0,0.3)"
    >
      <el-tree
        :data="treeData"
        show-checkbox
        :node-key="nodeKey"
        :default-expanded-keys="defaultExpandedKeys"
        :default-checked-keys="defaultChecks"
        :filter-node-method="filterNode"
        :props="defaultProps"
        @check="getCheckedKeys"
        :check-on-click-node="false"
        ref="elTree"
      >
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span :class="getCheckedClass(data)">{{ node.label }}</span>
        </span>
      </el-tree>
    </div>
    <div class="bottom" @click="getDcml" v-if="showDcml">导出目录</div>
    <!-- 弹窗 -->
    <div class="dialog">
      <el-dialog
        title="提示"
        :visible.sync="dialogVisible"
        width="30%"
        top="15%"
        :close-on-click-modal="false"
      >
        <span>{{ dialogText }}</span>
        <span slot="footer" v-if="footer">
          <el-button type="info" @click="dialogVisible = false" size="mini"
            >取 消</el-button
          >
          <el-button type="primary" @click="dialogVisible = false" size="mini"
            >确 定</el-button
          >
        </span>
        <!-- 进度条 -->
        <div class="progress" v-else :style="{ width: progressWidth }"></div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "tree",
  components: {},
  props: {
    // 树的唯一ID
    nodeKey: {
      type: String,
      default: "zbnm",
    },
    // 是否展示导出目录
    showDcml: {
      type: Boolean,
      default: true,
    },
    // 树 title
    title: {
      type: String,
      default: "目标层",
    },
    // 树 数据
    treeData: {
      type: Array,
    },
    // 查询
    leftTreeSelect: {
      type: Function,
    },
    // 导出目录
    createHtml: {
      type: Function,
    },
    // 配置树节点对应的字段
    defaultProps: {
      type: Object,
      default: () => {
        return {
          children: "children",
          label: "targetName",
        };
      },
    },
  },
  data() {
    return {
      filterText: "",
      defaultExpandedKeys: [2],
      checkedKeys: [],
      dialogVisible: false,
      footer: false,
      dialogText: "",
      progressWidth: "70%",
      defaultChecks: [],
      // defaultProps: {
      //   children: "childrens",
      //   label: "targetName",
      // },
    };
  },
  watch: {
    // treeData() {
    //   this.defaultChecks = [this.treeData[0].id];
    //   this.leftTreeSelect({ targetType: this.treeData[0].id });
    // },
    filterText(val) {
      if (!val) {
        this.$refs.elTree.filter(val);
      }
    },
  },
  computed: {
    ...mapState({
      loading(state) {
        return state.qbShow.loading;
      },
    }),
  },
  mounted() {
    console.log(888, this.treeData, this.checkedKeys);
  },
  methods: {
    // 搜索
    filterNode(value, treeData) {
      console.log(value, treeData);
      if (!value) return true;
      if (this.title === "目标层") {
        return treeData.targetName.indexOf(value) !== -1;
      } else {
        return treeData.atlasName.indexOf(value) !== -1;
      }
    },
    // 树形搜索变为点击搜索
    confirmFilterTextFn() {
      // if (this.filterText) {
        this.$refs.elTree.filter(this.filterText);
      // }
    },
    // label 样式
    getCheckedClass(data) {
      console.log(data);
      const checkedKeys = this.checkedKeys;
      const list = checkedKeys.filter((item) => item === data.zbnm);
      const checkedClass = list.length === 0 ? "" : "active";
      return checkedClass;
    },
    // 点击复选框出发
    getCheckedKeys(node, { checkedKeys }) {
      console.log(88, checkedKeys);
      this.checkedKeys = checkedKeys;
      let targetType = "";
      this.checkedKeys.forEach((info) => {
        targetType += info + ",";
      });
      targetType = targetType.substring(0, targetType.length - 1);
      console.log(89, targetType);
      this.leftTreeSelect({ targetType });
    },
    // 导出目录
    getDcml() {
      this.dialogVisible = true;
      // 是否选中目录树
      if (this.checkedKeys.length === 0) {
        // 提示文字
        this.dialogText = "请先选择相关目标才能进行导出！";
        // 弹窗footer
        this.footer = true;
      } else {
        // 提示文字
        this.dialogText = "正在导出...";
        // 弹窗footer
        this.footer = false;
        // 进度条百分比
        this.progressWidth = Math.floor(Math.random() * 100) + "%";
        console.log(this.checkedKeys, this.handleClose);
        console.log(676767, this.checkedKeys);
        this.createHtml({
          checkedKeys: this.checkedKeys,
          handleClose: this.handleClose,
        });
      }
    },
    // 关闭弹窗
    handleClose() {
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="scss">
@import "~@/styles/mixin.scss";
//  左侧侧边栏
.left-tree {
  color: #cccccc;
  // 文字超出换行
  .el-tree-node {
    white-space: normal;
    .el-tree-node__content {
      // height: 100%;
      height: auto;
      align-items: center;
    }
  }
  .top {
    margin-top: 0.06rem;
    margin-left: 0.2rem;
    padding: 0.1rem;
    color: #2a9dff;
    font-weight: 700;
    border-bottom: 1px solid rgba(119, 109, 253, 0.24);
    margin-bottom: 0.1rem;
    font-size: 0.16rem;
  }
  .search-wrap {
    margin-bottom: 0.1rem;
    // height: 0.42rem;
    display: flex;
    align-items: center;
    .search {
      // width: 2.4rem;
      // height: 0.42rem;
      margin-right: 5px;
      background: #034576 !important;
      // border: 0.01rem solid #313030;
      // padding-left: 0.02rem;
      border-radius: 0.05rem;
      .el-input__inner {
        // width: 96%;
        // height: 0.42rem !important;
        background: #034576;
        border: none;
        font-size: 0.12rem;
        padding: 0 8px;
        // margin-top: 0.12rem;
        color: white;
      }
    }
  }

  .center {
    @include scrollBar;
    // background: pink;
    height: 66.4vh;
    overflow-y: auto;
    overflow-x: hidden;
    .el-tree {
      font-size: 0.12rem;
      background: none;
    }
    .el-tree__empty-text {
      display: none;
    }
    .el-tree-node__content {
      font-size: 0.16rem;
      color: #cccccc;
    }
    .el-tree-node__content:hover {
      background-color: #000211;
      color: #2a9dff;
    }
    .el-tree-node:focus > .el-tree-node__content {
      background-color: #000211;
    }
    //   选中后颜色
    .el-checkbox__input.is-checked .el-checkbox__inner {
      background-color: #2a9dff;
      border-color: #2a9dff;
    }
    //   选中后颜色
    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
      background-color: #2a9dff;
    }
    // 选中的字体样式
    .active {
      color: #2a9dff;
    }
  }
  .bottom {
    color: #fff;
    background: #2a9dff;
    text-align: center;
    font-size: 0.16rem;
    cursor: pointer;
    // margin-top: -0.3rem;
  }
  .dialog {
    .el-dialog__header {
      background: #143853;
    }
    .el-dialog__title {
      color: #ffffff;
    }
    .el-dialog__body {
      padding: 0.3rem 0px;
      color: #ffffff;
      font-size: 0.16rem;
      word-break: break-all;
      text-align: center;
      background: #0f2d43;
    }
    .el-dialog__footer {
      background: #0f2d43;
    }
    .progress {
      position: static;
      margin-top: 0.25rem;
      margin-bottom: -0.25rem;
      border-bottom: 0.05rem solid #2a9dff;
      width: 50%;
    }
  }
}
</style>
